<template>
 <div>
   <div v-if="mode === 'edit'">
    <el-button type="primary" @click="handleScan">扫一扫</el-button>
    <el-button v-if="codeReader" type="primary" @click="resetScan">重置</el-button>
    <div v-show="codeReader && !scanText" class="scanContainer">
    <div class="qr-code">
      <video ref="video" height="100%" width="100%" id="video" autoplay></video>
    </div>
    <div class="box">
        <div class="line_row">
          <div class="line"></div>
        </div>
        <div class="angle"></div>
      </div>
     </div>
    <el-row v-if="scanText">
      <el-col :span="22">
        <div>扫码结果: <span class="scan-result">{{ scanText }}</span></div>
      </el-col>
    </el-row>
  </div>
  <div v-else>{{ value }}</div>
  </div>
</template>
 
<script>
import { BrowserMultiFormatReader } from "@zxing/library";

export default {
  name: "ScanPage",
  data() {
    return {
      codeReader: null,
      scanText: "",
    };
  },
  props: {
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
  },
   computed: {
    isDesigner() {
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
  },
  destroyed() {
    if (this.codeReader) this.resetScan()
  },
  methods: {
    resetScan() {
      this.codeReader.reset();
      this.codeReader = null;
      this.scanText = null;
    },
    handleScan() {
      this.openScan()
    },
    async openScan() {
      // 初始化摄像头
      this.codeReader = await new BrowserMultiFormatReader();
      this.codeReader
        .listVideoInputDevices()
        .then((videoDevices) => {
          console.log("get-videoDevices", videoDevices);

          let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
          if (videoDevices.length > 1) {
            firstDeviceId = videoDevices.find((el) => {
              return (
                el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1
              );
            })
              ? videoDevices.find((el) => {
                  return (
                    el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1
                  );
                }).deviceId
              : videoDevices[videoDevices.length - 1].deviceId;
          }
          console.log("get-firstDeviceId", firstDeviceId);

          this.decodeFromInputVideoFunc(firstDeviceId);
        })
        .catch((err) => {
          console.error(err);
          this.$message.error(err.message);
        });
    },
    decodeFromInputVideoFunc(firstDeviceId) {
     this.codeReader.reset()
     this.scanText = null
      this.codeReader.decodeFromVideoDevice(
        firstDeviceId || null,
        "video",
        (result, err) => {
          if (result) {
            console.log("扫码结果", result);
            this.scanText = result.text;
            this.codeReader.reset();
            this.$emit('input', this.scanText)  
          }
          // if (err) {
          //   console.error(err);
          // }
        }
      );
    },
  },
};
</script>
 
<style scoped lang="scss">
.qr-code {
  width: 60vw;
  height: 100vh;
  position: relative;
  #video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.scanContainer {
  margin-top: 15px;
  height: 100vh;
}

.box {
  width: 60vw;
  height: 100vh;
  position: relative;
  left: 0;
  top: -100vh;
  border: 1px solid #00ff33;

  .line_row {
    width: 100%;
    overflow: hidden;

    background-image: linear-gradient(
        0deg,
        transparent 24%,
        rgba(136, 176, 255, 0.1) 25%,
        rgba(136, 176, 255, 0.1) 26%,
        transparent 27%,
        transparent 74%,
        rgba(136, 176, 255, 0.1) 75%,
        rgba(136, 176, 255, 0.1) 76%,
        transparent 77%,
        transparent
      ),
      linear-gradient(
        90deg,
        transparent 24%,
        rgba(136, 176, 255, 0.1) 25%,
        rgba(136, 176, 255, 0.1) 26%,
        transparent 27%,
        transparent 74%,
        rgba(136, 176, 255, 0.1) 75%,
        rgba(136, 176, 255, 0.1) 76%,
        transparent 77%,
        transparent
      );
    background-size: 3rem 3rem;
    background-position: -1rem -1rem;
    animation: Heightchange 2s infinite;
    animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
    animation-delay: 1.4s;
    border-bottom: 1px solid rgba(136, 176, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}

.line {
  // height: calc(100% - 2px);
  // width: 100%;
  // background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
  // border-bottom: 3px solid #00ff33;
  // transform: translateY(-100%);
  // animation: radar-beam 2s infinite;
  // animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
  // animation-delay: 1.4s;
  width: 100%;
  height: 3px;
  background: #00ff33;
  // opacity: 0.58;
  filter: blur(4px);
}
.box:after,
.box:before,
.angle:after,
.angle:before {
  content: "";
  display: block;
  position: absolute;
  width: 3vw;
  height: 3vw;

  border: 0.1rem solid transparent;
}

.box:after,
.box:before {
  top: 0;
  border-top-color: #00ff33;
}

.angle:after,
.angle:before {
  bottom: 0;
  border-bottom-color: #00ff33;
}

.box:before,
.angle:before {
  left: 0;
  border-left-color: #00ff33;
}

.box:after,
.angle:after {
  right: 0;
  border-right-color: #00ff33;
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
@keyframes Heightchange {
  0% {
    height: 0;
  }

  100% {
    height: 100%;
  }
}
.scan-result {
  text-align: justify;
}
</style>